<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="renderer" content="webkit" />
<title>主页</title>

    <!-- 浏览器小图标-->
    <link rel="icon" href="../../image/zl_favicon.ico" type="x-icon">
    
    <link rel="stylesheet" type="text/css" href="../../plugins/jquery-custom-scrollbar/jquery.mCustomScrollbar.min.css"
    
    <link rel="stylesheet" type="text/css" href="../../plugins/minicolors/jquery.minicolors.css" />
    <link rel="stylesheet" type="text/css" href="../../plugins/animate/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="../../plugins/animate/animate.compat.css" />
    <!--     <link rel="stylesheet" type="text/css" href="../../plugins/select2/4.0.13/css/select2.min.css" /> -->
    
    <link rel="stylesheet" type="text/css" href="../../plugins/codemirror/lib/codemirror.css" />
    <link rel="stylesheet" type="text/css" href="../../plugins/jquery-ui/1.12.1/jquery-ui.min.css" />
    
    
    <link rel="stylesheet" type="text/css" href="../../plugins/bootstrap/4.6.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../../plugins/bootstrap/4.6.0/css/bootstrap-reboot.min.css" />
    <link rel="stylesheet" type="text/css" href="../../plugins/bootstrap/4.6.0/css/bootstrap-grid.min.css" />
    <link rel="stylesheet" type="text/css" href="../../plugins/bootstrap-table/1.18.3/dist/bootstrap-table.min.css" />
    <link rel="stylesheet" type="text/css" href="../../plugins/bootstrap-select/1.13.9/dist/css/bootstrap-select.min.css" />
    <link rel="stylesheet" type="text/css" href="../../plugins/bootstrap4-diaog/css/simple-bs-dialog.css" />
    
    <link rel="stylesheet" type="text/css" href="../../plugins/bootstrap-table/jquery-resizable-columns/dist/jquery.resizableColumns.css" />
    
        <!-- font-awesome图标字体 -->
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css" />
    
    <link rel="stylesheet" type="text/css" href="../../css/zbootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/editstyle.css" />
    <link rel="stylesheet" type="text/css" href="../../css/edit.css" />
    
     
    <script type="text/javascript" src="../../plugins/jquery/3.2.1/jquery.min.js"></script>
    
    
    
    <script type="text/javascript" src="../../plugins/art-template/template-web.js"></script>
    <script type="text/javascript" src="../../plugins/minicolors/jquery.minicolors.js"></script>
    <script type="text/javascript" src="../../plugins/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="../../plugins/jquery-custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<!--     <script type="text/javascript" src="../../plugins/select2/4.0.13/js/select2.full.min.js"></script> -->
    <script type="text/javascript" src="../../plugins/jquery.animations/js/jquery.animations.min.js"></script>
    <script type="text/javascript" src="../../plugins/jquery.animations/js/jquery.animations-tile.js"></script>   
    <script type="text/javascript" src="../../plugins/jquery-ui/1.12.1/jquery-ui.js"></script>

    <script type="text/javascript" src="../../plugins/codemirror/lib/codemirror.js"></script>
    
    <script type="text/javascript" src="../../plugins/codemirror/addon/selection/selection-pointer.js"></script>
    <script type="text/javascript" src="../../plugins/codemirror/mode/xml/xml.js"></script>
    <script type="text/javascript" src="../../plugins/codemirror/mode/css/css.js"></script>
    <script type="text/javascript" src="../../plugins/codemirror/mode/javascript/javascript.js"></script>
    <script type="text/javascript" src="../../plugins/codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <script type="text/javascript" src="../../plugins/codemirror/mode/sql/sql.js"></script>
    <script type="text/javascript" src="../../plugins/codemirror/mode/clike/clike.js"></script>
    <script type="text/javascript" src="../../plugins/codemirror/addon/hint/sql-hint.js"></script>
    <script type="text/javascript" src="../../plugins/codemirror/addon/hint/show-hint.js"></script>
    <script type="text/javascript" src="../../plugins/codemirror/addon/display/autorefresh.js"></script>

    <script type="text/javascript" src="../../plugins/bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="../../plugins/bootstrap-select/1.13.9/dist/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="../../plugins/bootstrap-table/1.18.3/dist/bootstrap-table.min.js"></script>
    
<!--     <script type="text/javascript" src="../../plugins/bootstrap-table/jquery-resizable-columns/dist/jquery.resizableColumns.js"></script> -->
<!--     <script type="text/javascript" src="../../plugins/bootstrap-table/1.18.3/dist/extensions/resizable/bootstrap-table-resizable.js"></script> -->
    
    
<!--     <script type="text/javascript" src="../../plugins/bootstrap-table-resizable/bootstrap-table-resizable.js"></script> -->
<!--     <script type="text/javascript" src="../../plugins/bootstrap-table-resizable/colresizable/colResizable-1.6.min.js"></script> -->

    <script type="text/javascript" src="../../plugins/bootstrap-input-spinner/src/input-spinner.js"></script>
    <script type="text/javascript" src="../../plugins/bootstrap-input-spinner/src/input-spinner-custom-editors.js"></script>
    <script type="text/javascript" src="../../plugins/bootstrap4-diaog/js/simple-bs-dialog.js"></script>
    
    <script type="text/javascript" src="../../js/zxTable.js"></script>
    <script type="text/javascript" src="../../js/zxUtil.js"></script>
    
    
    
    <![if IE]>

    <![endif]>
<style>

</style>
</head>
<body class="theme-e1" onload="">
<div class="main d-flex h-100" style="overflow: hidden;">
<div class="menu-content content-sm animated fadeInLeftBig">
 <div style="overflow-y: scroll;margin-right: -30px;padding-right: 20px;height: 100%;">
 <div class="sidebar-nav">
 <ul class="nav nav-list accordion-group">
    <li class="nav-header">
        <i class="fa fa-plus"></i> 布局组件
    </li>
    <li class="rows">
        <div class="layoutbox">
            <div class="preview">
                <input type="hidden" name="type" value="row"/>
                <div class="preview-60" style="">
                  <span class="align-middle">栅格</span>
                </div>
                <div class="preview-120 form-inline">
                  <select name="size" class="js-col form-control form-control-sm w-100" multiple></select>
                  <input type="text" name="number" value="6 6" class="form-control form-control-sm w-75" autocomplete="off"/>
                  <input type="text" name="number2" value="1" class="form-control form-control-sm w-25" autocomplete="off"/>
                </div>
                <div class="operation">
                <span class="drag"><i class="fa fa-arrows"></i></span>
                </div>
            </div>
        </div>
        <div class="layoutbox">
            <div class="preview">
                <input type="hidden" name="type" value="tabs"/>
                <div class="title preview-60" style="">
                  <span class="align-middle">标签页</span>
                </div>
                <div class="preview-35">
                  <input type="text" name="number" value="2" class="form-control form-control-sm" autocomplete="off"/>
                </div>
                <div class="operation">
                <span class="drag"><i class="fa fa-arrows"></i></span>
                </div>
            </div>
        </div>
        <div class="layoutbox">
            <div class="preview">
                <input type="hidden" name="type" value="scroll"/>
                <div class="preview-60" style="">
                  <span class="align-middle">滚动监听</span>
                </div>
                <div class="preview-35">
                  <input type="text" name="number" value="2" class="form-control form-control-sm" autocomplete="off"/>
                </div>
                <div class="operation">
                <span class="drag"><i class="fa fa-arrows"></i></span>
                </div>
            </div>
        </div>
        <div class="layoutbox">
            <div class="preview">
                <input type="hidden" name="type" value="div"/>
                <div class="preview-60" style="">
                  <span class="align-middle">普通容器</span>
                </div>
                
                <div class="operation">
                <span class="drag"><i class="fa fa-arrows"></i></span>
                </div>
            </div>
        </div>
        <div class="layoutbox">
            <div class="preview">
                <input type="hidden" name="type" value="model"/>
                <div class="preview-60" style="">
                  <span class="align-middle">弹框容器</span>
                </div>
                
                <div class="operation">
                <span class="drag"><i class="fa fa-arrows"></i></span>
                </div>
            </div>
        </div>
    </li>
 </ul>
 <ul class="nav nav-list accordion-group">
        <li class="nav-header">
            <i class="fa fa-plus"></i> 输入组件
        </li>
        <li class="boxes">
            <div class="elbox">
               <div class="preview">
                <input type="hidden" name="type" value="input"/>
                <div class="preview-60" style=""><span class="align-middle">输入框</span>
                </div>
                <div class="preview-70" style="">
                  <select name="size" value="sm" class="js-input form-control form-control-sm"></select>
                </div>
                <div class="preview-35" style="">
                  <input type="text" name="number" value="1" class="form-control form-control-sm" autocomplete="off"/>
                </div>
                <div class="operation">
                <span class="drag"><i class="fa fa-arrows"></i></span>
                </div>
               </div>
            </div>
            <div class="elbox">
                <div class="preview">
                  <input type="hidden" name="type" value="select"/>
                  <div class="preview-60" style=""><span class="align-middle">下拉框</span>
                  </div>
                  <div class="preview-70" style="">
                    <select name="size" value="sm" class="js-select form-control form-control-sm"></select>
                  </div>
                  <div class="preview-35" style="">
                    <input type="text" name="number" value="1" class="form-control form-control-sm" autocomplete="off"/>
                  </div>
                  <div class="operation">
                    <span class="drag"><i class="fa fa-arrows"></i></span>
                  </div>
               </div>
            </div>
            <div class="elbox">
                <div class="preview">
                  <input type="hidden" name="type" value="table"/>
                  <div class="preview-60" style=""><span class="align-middle">重复表</span>
                  </div>
                  <div class="operation">
                    <span class="drag"><i class="fa fa-arrows"></i></span>
                  </div>
               </div>
            </div>
            
        </li>
 </ul>
 <ul class="nav nav-list accordion-group">
        <li class="nav-header">
            <i class="fa fa-plus"></i> 按钮组件
        </li>
        <li class="boxes">
            <div class="elbox">
                <div class="preview">
                  <input type="hidden" name="type" value="button"/>
                  <div class="preview-60" style=""><span class="align-middle">按钮</span>
                  </div>
                  <div class="preview-70" style="">
                    <select name="size" value="sm" class="js-button form-control form-control-sm"></select>
                  </div>
                  <div class="preview-35">
                  </div>
                  <div class="operation">
                    <span class="drag"><i class="fa fa-arrows"></i></span>
                  </div>
               </div>
            </div>
        </li>
 </ul>
 <ul class="nav nav-list accordion-group">
        <li class="nav-header">
            <i class="fa fa-plus"></i> 图表组件
        </li>
        <li class="boxes">
            <div class="elbox">
                <div class="preview">
                  <input type="hidden" name="type" value="stackedBar"/>
                  <div class="preview-180" style=""><span class="align-middle">堆叠柱状图</span>
                  </div>
                  <div class="operation">
                    <span class="drag">
                      <i class="fa fa-arrows"></i>
                    </span>
                  </div>
                </div>
            </div>
        </li>
 </ul>
 </div>
 </div>
</div>

<div class="view-content animated fadeInUpBig">
     <div class="edit-header">
      <div class="row">
       <div class="col-7">
        <button type="button" class="btn btn-info btn-sm btn-shadow" id="btn-preview">设计/预览</button>
        <button type="button" class="btn btn-primary btn-sm btn-shadow" id="btn-run">运行</button>
        <button type="button" class="btn btn-primary btn-sm btn-shadow" id="btn-download">HTML</button>
        <button type="button" class="btn btn-primary btn-sm btn-shadow" id="btn-source" title="源码" >源码</button>
        <button type="button" class="btn btn-primary btn-sm btn-shadow" id="btn-help" title="帮助" ><i class="fa fa-question-circle"></i></button>
       </div>
      <div class="col">
        <div class="custom-control custom-switch float-right">
        <input type="checkbox" class="custom-control-input btn-shadow" id="option-status" autocomplete="off" />
        <label for="option-status" class="custom-control-label">关闭属性</label>
        </div>
      </div>
     </div>
     
     </div>
     <div id="edit-content" class="edit-content edit">
      <div id="edit-container" class="">
     </div>
     </div>
</div>

<div class="option-content content-sm animated fadeInRightBig">
<nav id="tab-configs">
       <ul class="nav tab-header nav-tabs" role="tablist" style="padding-left: 0.5rem;">
       <li class="nav-item"><a class="nav-link active" href="#tabc-configs-1" data-toggle="tab" >组件属性</a>
       </li>
       <li class="nav-item"><a class="nav-link" href="#tabc-configs-2" data-toggle="tab" >全局属性</a>
       </li>
       </ul>
</nav>
<div class="tab-content" id="tabc-configs"> 
<div class="tab-pane fade show active column ui-sortable" id="tabc-configs-1">
    <div class="row">
    <div class="col-sm-12">
        <h5>基础属性</h5>
     </div>
   </div>
   <div class="row">
    <label class="col-sm-3 col-form-label-sm">组件id</label>
    <div class="col-sm-9">
    <input type="text" class="form-control form-control-sm" id="cpt-class" autocomplete="off" />
    </div>
   </div>
   <div class="row">
    <label class="col-sm-3 col-form-label-sm">组件name</label>
    <div class="col-sm-9">
    <input type="text" class="form-control form-control-sm" id="cpt-class" autocomplete="off" />
    </div>
   </div>
   <div class="row">
    <label class="col-sm-3 col-form-label-sm">组件title</label>
    <div class="col-sm-9">
    <input type="text" class="form-control form-control-sm" id="cpt-class" autocomplete="off" />
    </div>
   </div>
    <div class="row">
    <label class="col-sm-3 col-form-label-sm">固有样式</label>
    <div class="col-sm-9">
    <input type="text" class="form-control form-control-sm" id="cpt-class" autocomplete="off" readonly />
    </div>
   </div>
   <div class="row">
    <label class="col-sm-3 col-form-label-sm">扩展样式</label>
    <div class="col-sm-9">
    <input type="text" class="form-control form-control-sm" id="cpt-extraclass" autocomplete="off">
    </div>
   </div>
   <div class="row">
    <div class="col-sm-12">
         <hr>
        <h5>内联样式</h5>
     </div>
   </div>
   <div class="row">
    <div class="col-sm-9">
    <textarea type="text" class="form-control form-control-sm" id="cpt-styles" style="height:28px;" autocomplete="off"></textarea>
     </div>
     <div class="col-sm-3">
       <button type="button" class="btn btn-primary btn-sm" id="btn-styleedit">编辑</button>
     </div>
  </div>
  
</div>

<div class="tab-pane fade" id="tabc-configs-2" style="">
   <div class="row">
    <div class="col-sm-12">
        <h5>基础属性</h5>
     </div>
   </div>
   <div class="row">
    <label class="col-sm-3 col-form-label-sm">开启内联</label>
    <div class="col-sm-4">
    <select type="text" class="form-control form-control-sm selectpicker" data-style="btn-none" id="container-forminline" autocomplete="off">
      <option value="0">否</option>
      <option value="1">是</option>
    </select>
    </div>
   </div>
   <div class="row">
    <label class="col-sm-3 col-form-label-sm">固有样式</label>
    <div class="col-sm-9">
    <input type="text" class="form-control form-control-sm" id="container-class" autocomplete="off" readonly />
    </div>
   </div>
   <div class="row">
    <label class="col-sm-3 col-form-label-sm">扩展样式</label>
    <div class="col-sm-9">
    <input type="text" class="form-control form-control-sm" id="container-extraclass" autocomplete="off" />
    </div>
   </div>
  <div class="row">
    <div class="col-sm-12">
         <hr>
        <h5>扩展属性</h5>
     </div>
   </div>
   
  <div class="row">
    <label class="col-sm-3 col-form-label-sm">JS代码</label>
    <div class="col-sm-9">
     <textarea type="text" class="form-control form-control-sm" id="container-js" style="height:28px;" autocomplete="off" ></textarea>
     <button type="button" class="btn btn-primary btn-sm" id="btn-js">编辑</button>
     </div>
  </div>
  <div class="row">
    <label class="col-sm-3 col-form-label-sm">CSS代码</label>
    <div class="col-sm-9">
     <textarea type="text" class="form-control form-control-sm" id="container-css" style="height:28px;" autocomplete="off"></textarea>
     <button type="button" class="btn btn-primary btn-sm" id="btn-css">编辑</button>
     </div>
  </div>
       
</div>
</div>

</div>

</div>




<!-- 消息 -->
<div class="position-fixed" style="z-index: 9999; margin: 0 auto;top: 0;right: 0;left: 0;width: 300px;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000" style="background: #FFF;color:#000">
    <div class="toast-header">
      <span class="rounded mr-2 text-primary"><i class="fa fa-circle" aria-hidden="true"></i></span>
      <strong class="mr-auto">消息</strong>
      <small></small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
    
    </div>
  </div>
</div>



<div class="animated" id="runDlg" tabindex="-1" style="position: absolute;z-index: 100;top: 0;left: 0;width:100%;height: 100%;display:none;">
    <div class="modal-content" style="height: 100%;">
      <div class="d-flex" style="line-height: 40px;color:#000;">
        <div onclick="switchDevicesFunc('1')" style="margin-left: 25px;margin-right: 10px;"><i class="fa fa-mobile" aria-hidden="true" style="transform: scale(2.5,2.5);"></i>&nbsp;&nbsp;&lt;576</div>
        <div onclick="switchDevicesFunc('2')" style="margin-left: 25px;margin-right: 10px;"><i class="fa fa-mobile" aria-hidden="true" style="transform: scale(2.6,2.7) rotate(90deg);"></i>&nbsp;&nbsp;&nbsp;≥576</div>
        <div onclick="switchDevicesFunc('3')" style="margin-left: 25px;margin-right: 10px;"><i class="fa fa-tablet" aria-hidden="true" style="transform: scale(2.2,2.3);"></i>&nbsp;&nbsp;≥768</div>
        <div onclick="switchDevicesFunc('4')" style="margin-left: 25px;margin-right: 10px;"><i class="fa fa-tv" aria-hidden="true" style="transform: scale(2,2);"></i>&nbsp;&nbsp;≥992</div>
        <div onclick="switchDevicesFunc('5')" style="margin-left: 25px;margin-right: 10px;"><i class="fa fa-tv" aria-hidden="true" style="transform: scale(2.3,2.3);"></i>&nbsp;&nbsp;≥1200</div>
        <div onclick="switchDevicesFunc('6')" style="margin-left: 25px;margin-right: 20px;"><i class="fa fa-arrows-alt" aria-hidden="true" style="transform: scale(2.3,2.3);"></i>&nbsp;&nbsp;</div>
        <div><button type="button" class="btn btn-secondary" id="close">关闭</button></div>
      </div>
      <div class="modal-body">
           <div id="iframerun" style="border: 15px solid #cacaca;border-radius: 10px;height: calc(100% - .5rem);overflow: hidden;margin: auto;">
           <iframe name="edit-iframe" style="width:100%;height:100%;border: none;"></iframe>
           <form class="d-none" id="edit-iframe-form" target="edit-iframe" method="post">
           <input id="html-content" name="htmlContent"/>
           <input id="js-content" name="jsContent"/>
           </form>
           </div>
      </div>
    </div>
</div>



<script type="text/javascript" src="./edit.js"></script>

<script type="text/javascript">
$(function(){
   
   //   $.fn.selectpicker.Constructor.BootstrapVersion = '4';
   var coldata = [
      {
            id: 'col-xl',
            text: 'col-xl≥1200'
        }
       ,{
           id: 'col-lg',
           text: 'col-lg≥992'
       },
       {
            id: 'col-md',
            text: 'col-md≥768'
        },
        {
            id: 'col-sm',
            text: 'col-sm≥576'
        },
        {
            id: "col",
            text: 'col<576' 
        }
   ];
     $('select[class*=js-col]').each(function(i,e){
        $.each(coldata,function(i,item){
             $(e).append('<option value="'+item['id']+'">'+item['text']+'</option>');
        });
     });
     $('select[class*=js-col]').selectpicker({
        maxOptions: 3,
        style: "btn-none",
     });
     
     
     $('select[class*=js-col]').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        var sizeVal = $(this).val();
        var numberVal = $(this).parent().parent().find('[name=number]').val();
        var numberVal2 = $(this).parent().parent().find('[name=number2]').val();
        var n = initDragButtonToggleForRow(numberVal,sizeVal.toString(),numberVal2);
        if (!n) {
               $(this).parent().parent().next(".operation").show();
         } else {
               $(this).parent().parent().next(".operation").hide();
         }
     });
     $('select[class*=js-col]').selectpicker('val','col-xl');
     
     var sizedata = [
           {
               id: "sm",
               text: '小/sm'
           },
           {
               id: 'md',
               text: '中/md'
           },
           {
               id: 'lg',
               text: '大/lg'
           }
       ];
     
     $('select[class*=js-input],select[class*=js-button],select[class*=js-select]').each(function(i,e){
          $.each(sizedata,function(i,item){
               $(e).append('<option value="'+item['id']+'">'+item['text']+'</option>');
          });
      });
     $('select[class*=js-input],select[class*=js-button],select[class*=js-select]').selectpicker({
            style: "btn-none"
     });
     
     $('#container-forminline').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
          var thisVal = $(this).val();
          var cfgClassVal =  $("#container-class").val();
          var cfgExtraClassVal =  $("#container-extraclass").val();
          var regx =new RegExp("\\bform-inline\\b","g");
          var regx2 =new RegExp("\\s+","g");
          var cflag = false;
          if(!cfgClassVal){
              cfgClassVal = "";
          }
          if(!cfgExtraClassVal){
              cfgExtraClassVal = "";
          }
          if(regx.test(cfgExtraClassVal)){//包含
             cflag = true;
          }
          if("0" === thisVal){
              if(cflag){
                  cfgExtraClassVal = cfgExtraClassVal.replace(regx,"");
              }
          }else{
              if(!cflag){
                  cfgExtraClassVal = "form-inline " + cfgExtraClassVal;
              }
          }
          cfgExtraClassVal = cfgExtraClassVal.trim().replace(regx2," ");
          $("#container-extraclass").val(cfgExtraClassVal);
          
          $("#edit-container").attr("class",cfgClassVal +" "+ cfgExtraClassVal);
      }); 
     
      //颜色组件
/*       $('#cpt-bg-color,#cpt-font-color').minicolors({
          animationSpeed: 50,
          animationEasing: 'swing',
          change: null,
          changeDelay: 0,
          control: 'hue',
          defaultValue: '',
          hide: null,
          hideSpeed: 100,
          inline: false,
          letterCase: 'lowercase',
          opacity: true,
          position: 'bottom left',
          show: null,
          showSpeed: 100,
          theme: 'default',
         change: function(value, opacity) {
           console.log(value + ' - ' + opacity);
         }
     }); */
      
      setTimeout(function(){
          $('body').find(".main div[class*=animated]").removeClass("animated rotateIn fadeInUpBig fadeInLeftBig");
      },2000);
      
      
      /* $( ".menu-content .sidebar-nav" ).draggable({ axis: "y"
    	  ,distance: 5
    	 ,drag: function(event, ui ){
    		 console.log(ui);
    		 var top1 = ui.position.top;
    		 var left1 = ui.position.left;
    		 var top2 = ui.offset.top;
             var left2 = ui.offset.left;
             var h1 = $( ".menu-content" ).height();
             var h2 = $(event.target).height();
             var h3 = h2 - h1;
    		 if(top1>=0){
    			 return false;
    		 }else if(h3<=0){
    			 return false;
    		 }else if((h3+top1)<=0){
                 return false;
             }
    	 }
      });
      $( "#tabc-configs>.tab-pane" ).draggable({ axis: "y"
          ,distance: 5
         ,drag: function(event, ui ){
             console.log(event);
             var top1 = ui.position.top;
             var left1 = ui.position.left;
             var top2 = ui.offset.top;
             var left2 = ui.offset.left;
             var h1 = $( "#tabc-configs" ).height();
             var h2 = $(event.target).height();
             var h3 = h2 - h1;
             if(top1>=0){
                 return false;
             }else if(h3<=0){
                 return false;
             }else if((h3+top1)<=0){
                 return false;
             }
         }
      }); */
      
      //切换预览模式
      $('#btn-preview').click(function(){
          $('#edit-content').toggleClass("edit");
          initSelectCptFunc();
          $(window).resize();
          $('.bootstrap-select>select').selectpicker('refresh');
      });
      //运行
      $('#btn-run').click(function(){
          $('#runDlg').show();
          $('#runDlg').addClass('bounceIn');
          
          var lastconfigs = runHtmlFunc();
          $('#edit-iframe-form #html-content').val(lastconfigs['htmlContent']);
          $('#edit-iframe-form #js-content').val(lastconfigs['jsContent']);
          
          var url = "http://127.0.0.1:9091/autocode/api/autocode/edit/run?myToken=autocode";
          var f = $('#edit-iframe-form').attr("action",url);
          f.submit();
      });
      $('#runDlg #close').click(function(){
          $('#runDlg').hide();
          $('#runDlg').removeClass("bounceIn");
      });
      $('#option-status').click(function(){
          $('.option-content').toggleClass("d-none");
          $('.view-content').toggleClass("view-content2");
      });
      $('#btn-help').click(function(){
          SimpleBsDialog.show({
              id:"helpInfoDlg",
              title: '说明文档',
              spinner: true,
              load:'./editHelp.html',
              fullScreen: true, 
              cssClass: '',
              buttons: [
                   {
                      id: 'btn-close',
                      label: 'close',
                      cssClass: 'btn-info',
                      action: function(dialogRef) {
                          dialogRef.close();
                      },
                  }
              ],
              onShown: function(dialogRef) {
                  setTimeout(function() {
                      dialogRef.set({
                          'spinner': false,
                      });
                      dialogRef.getButtons().prop('disabled', false);
                  }, 200);
              },
          }); 
      });
      $('#btn-download').click(function(){
          SimpleBsDialog.show({
              id:"downloadHtmlDlg",
              title: 'html下载',
              spinner: true,
              load:'./editHTML.html',
              fullScreen: true, 
              cssClass: '',
              buttons: [
                   {
                      id: 'btn-close',
                      label: 'close',
                      cssClass: 'btn-info',
                      action: function(dialogRef) {
                          dialogRef.close();
                      },
                  }
              ],
              onShown: function(dialogRef) {
                  setTimeout(function() {
                      dialogRef.set({
                          'spinner': false,
                      });
                      dialogRef.getButtons().prop('disabled', false);
                  }, 200);
                  
                  var lastconfigs = runHtmlFunc();
                  
                  var editorObj = $('#downloadHtmlDlg #json-area').next('.CodeMirror');
                  var sourceInfoDlgEditor = null;
                  if(editorObj.length === 0){
                     sourceInfoDlgEditor = CodeMirror.fromTextArea($('#downloadHtmlDlg #json-area')[0], {
                          autoRefresh:true,
                          lineNumbers: true,
                          styleActiveLine: true,
                          matchBrackets: true,
                          lineWrapping: true,
                          mode:"htmlmixed",
                     });
                     sourceInfoDlgEditor.setSize('100%','100%');
                  }else{
                     sourceInfoDlgEditor = editorObj[0].CodeMirror;
                  }
                  sourceInfoDlgEditor.setValue(lastconfigs['htmlContent']+ '\n\n' + lastconfigs['jsContent']);
                  
              },
          });
      });
      $('#btn-source').click(function(){
          SimpleBsDialog.show({
              id:"sourceInfoDlg",
              title: '源码结构',
              spinner: true,
              load:'./editJSON.html',
              fullScreen: true, 
              cssClass: '',
              buttons: [
                   {
                      id: 'btn-close',
                      label: 'close',
                      cssClass: 'btn-info',
                      action: function(dialogRef) {
                          dialogRef.close();
                      },
                  }
              ],
              onShown: function(dialogRef) {
            	  setTimeout(function() {
                      dialogRef.set({
                          'spinner': false,
                      });
                      dialogRef.getButtons().prop('disabled', false);
                  }, 200);
            	  
            	  var configData = [];
                  htmlToConfigFunc($('[cpt-id=container]'),configData);
                  
                  var editorObj = $('#sourceInfoDlg #json-area').next('.CodeMirror');
                  var sourceInfoDlgEditor = null;
                  if(editorObj.length === 0){
                     sourceInfoDlgEditor = CodeMirror.fromTextArea($('#sourceInfoDlg #json-area')[0], {
                          autoRefresh:true,
                          lineNumbers: true,
                          styleActiveLine: true,
                          matchBrackets: true,
                          lineWrapping: true,
                          mode:"application/json",
                     });
                     sourceInfoDlgEditor.setSize('100%','100%');
                  }else{
                     sourceInfoDlgEditor = editorObj[0].CodeMirror;
                  }
                  sourceInfoDlgEditor.setValue(zUtil.strify(configData,{indentFlag: true}) +"\n");
//                   sourceInfoDlgEditor.setValue(JSON.stringify(configData));
                  
              }
          });
      });
      
      $('#btn-styleedit').click(function(){
            SimpleBsDialog.show({
              id:"styleEditDlg",
              width: '700',
              height: '400',
              title: '样式编辑器',
              maximize: true,
              minimize: true,
              draggable:true,
              spinner: true,
              load:'./editStyle.html',
              fullScreen: true, 
              cssClass: '',
              buttons: [
                   {
                      id: 'btn-cancel',
                      label: 'Cancel',
                      cssClass: 'btn-warning',
                      action: function(dialogRef) {
                          console.log('Cancel button pressed!');
                          dialogRef.close();
                      },
                  }
                  ,{
                      id: 'btn-ok',
                      label: 'OK',
                      cssClass: 'btn-primary',
                      action: function(dialogRef) {
                          console.log('OK button pressed!');
                          dialogRef.close();
                      },
                  },
              ],
              onShow: function(dialogRef) {
                  console.log('onShow');

                  dialogRef.getButtons().prop('disabled', true);
              },
              onShown: function(dialogRef) {
                  console.log('onShown');
                  
                  $(dialogRef.getModalBody()).find('.Getleft').accordion({
                      icons:{
                          header: "fa fa-minus",
                          activeHeader: "fa fa-plus"
                      },
                      heightStyle: "content",
                      collapsible: true
                  });
                  
                  $(dialogRef.getModalBody()).find(".GetSetup-Slide").each(function(i,item){
                      $(item).slider({
                          min: 0,
                          max: 200,
                          range: "min",
                          value: 0,
                          slide: function(event, ui) {
                             $(this).next('.GetSetup-input').val(ui.value);
                          }
                      });
                  });
                  $(dialogRef.getModalBody()).find('.GetSetup-input').each(function(i,item){
                      $(this).change(function() {
                          $(this).prev('.GetSetup-Slide').slider("value",  $(this).val());
                      });
                  });
                  
                  setTimeout(function() {
                      dialogRef.set({
                          'spinner': false,
                      });
                      dialogRef.getButtons().prop('disabled', false);
                  }, 1000);
              },
              onHide: function(dialogRef) {
                  console.log('onHide');
              },
              onHidden: function(dialogRef) {
                  console.log('onHidden');
              },
          }); 
           
      });
      
//       $('#btn-styleedit').click();

       $('#btn-js').click(function(){
          SimpleBsDialog.show({
              id:"jsEditDlg",
              title: 'js编辑',
              spinner: true,
              load:'./editJSON.html',
              fullScreen: true, 
              cssClass: '',
              buttons: [
                   {
                      id: 'btn-close',
                      label: 'close',
                      cssClass: 'btn-info',
                      action: function(dialogRef) {
                          dialogRef.close();
                      },
                  }
              ],
              onShown: function(dialogRef) {
                  setTimeout(function() {
                      dialogRef.set({
                          'spinner': false,
                      });
                      dialogRef.getButtons().prop('disabled', false);
                  }, 200);
                  
                  var tval = $('#container-js').val();
                  
                  var editorObj = $('#jsEditDlg #json-area').next('.CodeMirror');
                  var JSInfoDlgEditor = null;
                  if(editorObj.length === 0){
                     JSInfoDlgEditor = CodeMirror.fromTextArea($('#jsEditDlg #json-area')[0], {
                          autoRefresh:true,
                          lineNumbers: true,
                          styleActiveLine: true,
                          matchBrackets: true,
                          lineWrapping: true,
                          mode:"text/javascript",
                     });
                     JSInfoDlgEditor.setSize('100%','100%');
                  }else{
                     JSInfoDlgEditor = editorObj[0].CodeMirror;
                  }
                  JSInfoDlgEditor.setValue(tval);
              }
          });
      });
       $('#btn-css').click(function(){
           SimpleBsDialog.show({
               id:"cssEditDlg",
               title: 'css编辑',
               spinner: true,
               load:'./editJSON.html',
               fullScreen: true, 
               cssClass: '',
               buttons: [
                    {
                       id: 'btn-close',
                       label: 'close',
                       cssClass: 'btn-info',
                       action: function(dialogRef) {
                           dialogRef.close();
                       },
                   }
               ],
               onShown: function(dialogRef) {
                   setTimeout(function() {
                       dialogRef.set({
                           'spinner': false,
                       });
                       dialogRef.getButtons().prop('disabled', false);
                   }, 200);
                   
                   var tval = $('#container-css').val();
                   
                   var editorObj = $('#cssEditDlg #json-area').next('.CodeMirror');
                   var JSInfoDlgEditor = null;
                   if(editorObj.length === 0){
                      JSInfoDlgEditor = CodeMirror.fromTextArea($('#cssEditDlg #json-area')[0], {
                           autoRefresh:true,
                           lineNumbers: true,
                           styleActiveLine: true,
                           matchBrackets: true,
                           lineWrapping: true,
                           mode:"text/css",
                      });
                      JSInfoDlgEditor.setSize('100%','100%');
                   }else{
                      JSInfoDlgEditor = editorObj[0].CodeMirror;
                   }
                   JSInfoDlgEditor.setValue(tval);
               }
           });
       });
       
});
function switchDevicesFunc(type){
    if("1" === type){
       $('#iframerun').css({width:"414px",height: "calc(100% - .5rem)"});
    }if("2" === type){
       $('#iframerun').css({width:"605px",height:"285px"});
    }else if("3" === type){
       $('#iframerun').css({width:"768px",height: "calc(100% - .5rem)"});
    }else if("4" === type){
       $('#iframerun').css({width:"1024px",height: "calc(100% - .5rem)"});
    }else if("5" === type){
       $('#iframerun').css({width:"1280px",height: "calc(100% - .5rem)"});
    }else if("6" === type){
       $('#iframerun').css({width:"auto",height: "calc(100% - .5rem)"});
    }
}
</script>

</body>
</html>